<template>
    <el-dialog
        v-model="dialogVisible"
        title="兑换点数"
        width="30%"
        :before-close="handClose"
    >
        <div class="">
            <el-form :model="formData" ref="formRef" label-width="80px">
                <el-form-item label="点数" class="formItem">
                    <el-select v-model="formData.point" class="m-2" placeholder="选择点数" @change="onPointChange">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" class="formItem">
                    <el-input v-model="formData.cost" readonly />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="confirmDialog">
            确认
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { User, MoreFilled } from '@element-plus/icons-vue'
import TenantApi from '../../apis/tenant'
import {useUserStore} from '../../stores/user'

const router = useRouter();
const route = useRoute();
const userStore = useUserStore()

const props = defineProps({
    isShow: Boolean,
    handleUpdated: Function,
    plan: String
})

const formRef = ref<FormInstance>()
const formData = ref({
    point: 1000,
    cost: 10
});

const options = [
  {
    value: 1000,
    label: '1000',
  },
  {
    value: 5000,
    label: '5000',
  },
  {
    value: 10000,
    label: '10000',
  },
  {
    value: 20000,
    label: '20000',
  },
  {
    value: 30000,
    label: '30000',
  },
  {
    value: 50000,
    label: '50000',
  }
]

const emit = defineEmits(['update:isShow']);

const dialogVisible = ref(props.isShow);
watch(()=> props.isShow,() => {
    console.log('props.isShow change', props.isShow);
    dialogVisible.value = props.isShow
});

const handClose = () =>{
    console.log('handClose');
    emit('update:isShow', false)
}

const closeDialog = () => {
    console.log('closeDialog');
    emit('update:isShow', false)
}

const confirmDialog = () => {
    emit('update:isShow', false)
    TenantApi.redeemPoints(formData.value.point).then(ret=>{
        if(ret.code == 0){
            ElMessage({
                type: 'success',
                message: "兑换成功",
            });
            if(props.handleUpdated){
                props.handleUpdated();
            }
            setTimeout(async () => {
                emit('update:isShow', false)
            }, 1500);
        }else{
            ElMessage({
                type: 'error',
                message: "兑换失败, 请确认余额是否足够",
            });
        }
    }).catch(err=>{
        ElMessage({
            type: 'error',
            message: err
        });
    });
    
}

const onPointChange = (val:any)=>{
    console.log('[Redeem]onPointChange', val)
    formData.value.cost = val/100;
}
</script>

<style scoped>
.formItem {
    align-items: center;
}
</style>
